<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <#include "include/_meta.html">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>

</head>
<body>
<nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span> 用户中心 <span class="c-gray en">&gt;</span> 用户管理
    <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新" >
        <i class="Hui-iconfont">&#xe68f;</i></a></nav>
<div class="page-container" id="clientList">
    <form role="form">
    <div class="text-c"> 日期范围：
        <input type="text" onfocus="WdatePicker({maxDate:'#F{$dp.$D(\'datemax\')||\'%y-%M-%d\'}'})" id="datemin" class="input-text Wdate" style="width:120px;">
        -
        <input type="text" onfocus="WdatePicker({minDate:'#F{$dp.$D(\'datemin\')}',maxDate:'%y-%M-%d'})" id="datemax" class="input-text Wdate" style="width:120px;">

        <label for="name">客户名字:</label>
        <input type="text" class="input-text" style="width:250px" placeholder="输入客户名字 " id="name" name="name"/>
        <label for="mobile">手机号:</label>
        <input type="text" class="input-text" style="width:250px" placeholder="输入手机号 " id="mobile" name="mobile"/>
        <button type="button"  class="btn btn-success" id="searchUsers">
            <i class="Hui-iconfont">&#xe665;</i> 搜用户
        </button>
    </div>
    </form>
    <div class="cl pd-5 bg-1 bk-gray mt-20">
        <span class="l">
            <a href="javascript:;" onclick="datadel()" class="btn btn-danger radius">
                <i class="Hui-iconfont">&#xe6e2;</i> 批量删除
            </a>
	<a href="javascript:;"  class="btn btn-primary radius" id="clientAdd">
        <i class="Hui-iconfont">&#xe600;</i> 添加客户</a>
        </span>

        <span class="r">共有数据：<strong id="pageTotal">54</strong> 条</span>
    </div>

    <table id="userListTable" class="table table-border table-bordered table-bg table-hover">
        <thead>
        <tr>
            <th scope="col" colspan="9">客户列表</th>
        </tr>
        <tr class="text-c">
            <th width="25"><input type="checkbox" name="useritem" value=""></th>
            <th width="70">编号</th>
            <th width="70">客户名称</th>
            <th width="150">身份证</th>
            <th width="90">手机号</th>
            <th width="150">信用值</th>
            <th width="150">会员等级</th>
            <th width="130">添加时间 </th>
            <th width="100">操作</th>


        </tr>
        </thead>
        <tbody>
        <tr class="text-c" v-for="(client,index) in info.list">
            <td><input type="checkbox" name="useritem" :value="client.uid"></td>
            <td>{{<#--index + 1-->client.uid}}</td>
            <td>{{client.name}}</td>
            <td>{{client.idcard}}</td>
            <td>{{client.mobile}}</td>
            <td>{{client.creditnum}}</td>
            <td>{{client.levelname}}</td>
            <td>{{client.addtime}}</td>
            <td>
                <a href="#" @click="editEvent(client.uid)">编辑</a>
                <a href="#" @click="delEvent(client.uid)">删除</a>
            </td>
        </tr>
        </tbody>
    </table>
    <div class="pagenav" id="pagenav"></div>
</div>

<#include "include/_footer.html">

<script type="text/javascript">
    var clientList=new Vue({
        el:'#clientList',
        data:{
            info:{}
        }
    });


    var getClientList = function (curr) {
        $.ajax({
            url:"/client",
            data:{
                pageSize:8,
                curr:curr || 1,
                name:$("#name").val(),
                mobile:$("#mobile").val()

            },
            dataType:"json",
            type:"GET",
            success:function (info) {
                clientList.info=info;
                laypage({
                    cont:"pagenav",
                    pages:info.pages,
                    skin:"#DB7023",
                    first:"首页",
                    last:"最后一页",
                    curr:curr || 1,
                    jump:function (obj,first) {
                        if (!first){
                            getClientList(obj.curr);
                        }
                    }
                });
            }
        });
    }
    getClientList();

    /*查询用户信息*/
   $("#searchUsers").click(function () {
       getClientList();
   })

    /*添加用户信息*/
$("#clientAdd").on("click",function () {
    layer.open({
        type:2,
        title:"添加用户",
        fix:false,
        maxmin:true,
        shadeClose:true,
        area:['800px','650px'],
        content:"/client-add",
        end:function () {
            getClientList();
        }

    });
});


/*修改客户信息*/
    var editEvent=function (uid) {
        layer.open({
            type:2,
            title:"编辑用户",
            fix:false,
            maxmin:true,
            shadeClose:true,
            area:['800px','600px'],
            content:"/editPage?uid="+uid,
            end:function () {
                getClientList();
            }
        })
    }


    /*删除客户信息*/
    var delEvent=function (uid) {
        //删除确认框
        layer.confirm('确认删除？',{
            btn:['是','否']
        },function () {
            $.ajax({
                type:"post",
                dataType:"json",
                url:"/del",
                data:{
                    uid:uid
                },
                success:function (msg) {
                    getClientList();
                    layer.msg("已经删除",{icon:6});
                }
            });
        },function () {

        })
    }

    //批量删除
    var datadel=function () {
    //判断是否选中复选框
    var checkedNum=$("input[name='useritem']:checked").length;
    if (checkedNum==0){
        layer.msg('请选中要删除的列表项',{icon:5});
        return;
    }
    //获取复选框的值
    var checkedVal="";
    $("input[name='useritem']:checked").each(function () {
        checkedVal+=$(this).val()+",";
    });
    
    var itemsTipStr="一条记录";
    if (checkedNum>1){
        itemsTipStr="这些选项";
    }
    layer.confirm('确认要删除'+itemsTipStr+'吗?',function () {
        $.ajax({
            type:"POST",
            url:"/delete",
            dataType:"json",
            data:"clientUsersuid="+checkedVal,
            success:function (msg) {
                getClientList();
                layer.msg('删除成功',{icon:5,time:1000});
            }
        })
    })
}


</script>
</body>